// out: ../css/dynamic.css
@import 'common';

.dynamic-item {
	border-bottom: 3px solid #eff3f4;
	background-color: #fff;
	&.dynamic-detail {
		padding-bottom: 10px;
	}
}

.user-wrap {
	display: flex;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #fafafa;

	.user-avatar {
		width: 50px;
		height: 50px;

		img {
			width: 100%;
			border-radius: 50px;
		}
	}

	.user-info {
		flex: 1;
		height: 100%;
		margin-left: 5px;
		.icon {
			width: 10px;
			height: 10px;
			margin-right: 2px;
			&.icon-sex-1 {
				background-position: -340px -80px;
			}
			&.icon-sex-2 {
				background-position: -350px -80px;
			}
		}
		.name {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 14px;
			margin-bottom: 5px;
			.age {
				display: flex;
				justify-content: center;
				align-items: center;
				width: auto;
				height: 14px;
				line-height: 14px;
				margin-left: 5px;
				padding: 0 6px;
				color: #fff;
				border-radius: 20px;
				font-size: 12px;
				text-align: center;
			}
			.age1 {
				background: #3ab7f8;
			}
			.age2 {
				background: #fc21fc;
			}
		}
		.occupation {
			font-size: 12px;
			color: #999;
		}
	}

	.time {
		flex: 1;
		text-align: right;
	}
}

.dynamic-con {
	.text {
		line-height: 20px;
	}

	.description {
		padding: 10px;
		font-size: 12px;
	}

	.media-wrap {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10px;
		box-sizing: border-box;
		margin-left: -1px;
		margin-top: -1px;
		
		.media-item {
			flex: 0 0 33.3%;
			padding: 1px;
			box-sizing: border-box;
			position: relative;
			&.media1 {
				flex: 0 0 100%;
				.img {
					width: 50%;
				}
				.video {
					width: 100%;
				}
			}
			.img {
				width: 100%;
			}
			.blur {
				-webkit-filter: blur(8px);
				-moz-filter: blur(8px);
				-ms-filter: blur(8px);
				filter: blur(8px);
				img {
					margin: 10px 0;
				}
			}
			.video {
				width: 100%;
				height: 200px;
				background-color: #000;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				position: relative;
				border-radius: 5px;
				.play-icon {
					position: absolute;
					width: 40px;
					line-height: 40px;
					text-align: center;
					left: 50%;
					top: 50%;
					margin-left: -20px;
					margin-top: -20px;

					.iconfont {
						font-size: 30px;
						color: #fff;
					}
				}
			}
			img {
				width: 100%;
				display: block;
				border-radius: 3px;
			}
			.private {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30px;
				height: 30px;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 30px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -10px;
				margin-top: -10px;
			}
			.iconfont.icon-status1 {
				color: #fff;
			}
		}
	}
}

.dynamic-status {
	display: flex;

	.status-item {
		display: flex;
		flex: 1;
		padding: 15px 0;
		justify-content: center;
		align-items: center;
		color: #666;
		font-size: 14px;

		.iconfont {
			font-size: 16px;
			margin-right: 4px;
		}
	}

	.is_like {
		color: #ff74a0;
	}
}

.comment-wrap {
	.comment-total {
		padding: 15px 10px;
		border-bottom: 1px solid #efefef;
		font-size: 14px;
		color: #333;
	}
	.comment-item {
		display: flex;
		padding: 10px;
		.avatar-wrap {
			width: 40px;
			height: 40px;
			margin-right: 10px;
			img {
				display: block;
				width: 100%;
				border-radius: 40px;
			}
		}
		.comment-info {
			flex: 1;
			.member-name {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				line-height: 24px;
				.name {
					color: #000;
				}
				.time {
					color: #999;
				}
			}
			.comment-con {
				font-size: 12px;
				color: #555;
			}
		}
	}
	.comment-none {
		padding: 10px;
		text-align: center;
		color: #666;
		font-size: 12px;
	}
}

.input-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 15px 0;
	border-top: 1px solid #ddd;
	input {
		height: 30px;
		flex: 1;
		padding: 0 5px;
		box-sizing: border-box;
		margin-left: 10px;
	}
	button {
		margin: 0 10px;
		height: 30px;
		width: 60px;
		background: @main-color;
		color: #fff;
		border-radius: 30px;
	}
}